<template>
  <section style="padding: 10px">
    <el-row>
      <el-col :span="7">
        <el-form ref="form" label-width="40px">
          <el-form-item label="菜单">
            <treeselect
                v-model="parentId"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择菜单"
            />
          </el-form-item>`
        </el-form>
        <el-upload
            drag
            style="margin-bottom: 30px;"
            :action="url + parentId"
            :file-list="fileList"
            :on-success="handleSuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <el-form label-width="40px">
          <el-form-item label="下载">
            <el-input type="text" id="link" :value="downloadUrl">
              <template slot="append">
                <el-button
                    class="btn"
                    style="margin-left:10px"
                    data-clipboard-action="copy"
                    data-clipboard-target="#link"
                    @click="copyLink"
                >复制</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="预览">
            <el-input type="text" id="link1" :value="sourceUrl">
              <template slot="append">
                <el-button
                    class="btn"
                    style="margin-left:10px"
                    data-clipboard-action="copy"
                    data-clipboard-target="#link1"
                    @click="copyLink"
                >复制</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8"><br></el-col>
      <el-col :span="7">
        <el-form label-width="20%">
          <el-form-item label="bookname">
            <el-input type="text" v-model="bookIndex.bookname"></el-input>
          </el-form-item>
          <el-form-item label="url">
            <el-input type="text" v-model="bookIndex.url"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addBook">添加图书</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Clipboard from 'clipboard';
import {listMenu} from "@/api/system/menu";
import {addBookIndex} from "@/api/library";

export default {
  name: "index",
  components: { Treeselect },
  data() {
    return {
      parentId: 0,
      menuOptions: [],
      url: `${process.env.VUE_APP_BASE_API}/file/upload/`,
      fileList: [],
      downloadUrl: '',
      sourceUrl: '',
      bookIndex: {
        bookname: '',
        url: ''
      }
    }
  },
  mounted() {
    this.getTreeSelect();
  },
  methods: {
    // 查询菜单下拉树结构
    getTreeSelect() {
      listMenu().then(response => {
        this.menuOptions = [];
        const menu = { menuId: 0, menuName: '主类目', children: [] };
        menu.children = this.handleTree(response.data, "menuId");
        this.menuOptions.push(menu);
      });
    },
    // 转换菜单数据结构
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      };
    },
    // 上传成功
    handleSuccess(response) {
      this.downloadUrl = response.downloadUrl;
      this.sourceUrl = response.sourceUrl;
      this.fileList = [];
    },
    // 复制链接方法
    copyLink () {
      let clipboard = new Clipboard('.btn')
      setTimeout(() => {
        clipboard.destroy() // 清除缓存
      }, 1000)
    },
    addBook() {
      addBookIndex(this.bookIndex).then(response => {
        this.msgSuccess(response.msg);
      })
    }
  }
}
</script>

<style scoped>

</style>